import React from "react"
import {connect,} from 'react-redux'
import BasicThead from "../../../../shared-components/Tables/BasicThead/BasicThead";
import {coinConsumeList} from "../../../../utils/mockdata";
import LocalStorageService from "../../../../utils/LocalStorageService";
import FetchListComponent from "../../../../shared-components/FetchListComponent/FetchListComponent";
import {Toast, WhiteSpace, WingBlank} from "antd-mobile";
import CoinConsumeCard from "../../../../shared-components/CoinConsumeCard/CoinConsumeCard";
import {formatDate} from "../../../../utils/dateService";

const uid = LocalStorageService.get('userid')

class ServiceConsume extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            p: 0,
            end: false,
        }
    }

    onTouchEnd = (e) => {

        const ctn = this.listCtn
        const last = ctn.lastElementChild
        const end = this.state.end
        const rect = last.getBoundingClientRect()
        const cH = document.documentElement.clientHeight
        const top = rect.top
        const endCallback = () => {
            Toast.info('已经没有数据了')
            this.setState({
                end: true,
            })
        }
        if (cH > top) {
            if (end) {
                Toast.info('已经没有数据了')
            } else {
                const cP = this.state.p
                const nP = cP + 1
                this.setState({
                    p: nP,
                })
                this.props.doFetchCoinConsumeLog({p: nP, uid, endCallback,})
            }
        }


    }

    render() {
        const props = this.props
        const list = props.coinConsumeList
        const fetchList = props.doFetchCoinConsumeLog
        const unmountMethod = () => {
            props.doEmptyConsumeList()
        }
        const params = {p: this.state.p, uid: LocalStorageService.get('userid')}
        const render = (list) => {

            if (list.length === 0) {
                return <div style={{textAlign: 'center', width: '100%', padding: '8px'}}><p>暂无数据</p></div>
            }

            const tH = [
                {
                    title: '时间', dataIndex: 'CreateT',
                },
                {
                    title: '类型', dataIndex: 'Dealtype',
                },
                {
                    title: '额度', dataIndex: 'Money',
                },
            ]

            const trTemplate = (list.map(item => {
                return (
                    <tr key={item.Dealno}>
                        {tH.map((head,i ) => {
                            const mark = head.dataIndex
                            let value = item[mark]

                            if (mark === 'CreateT') {
                                // value = value.slice(0, 10)
                                value = formatDate(new Date(value * 1000), '-')
                            }

                            if (mark === 'Dealtype') {
                                let mapper = {
                                    101: '小应分析',
                                    100: 'VIP会员续费',
                                }
                                value = mapper[value]
                            }

                            return <td key={i}>{value}</td>
                        })}
                    </tr>
                )
            }))

            return (
                <>
                    <table
                        className='basic-table'
                        onTouchEnd={e => this.onTouchEnd(e)}
                    >
                        <BasicThead tHead={tH}/>
                        <tbody ref={el => this.listCtn = el}>
                        {trTemplate}

                        </tbody>
                    </table>
                </>
            )
        }

        return <FetchListComponent
            fetchList={fetchList}
            params={params}
            list={list}
            render={render}
            unmountMethod={unmountMethod}
        />

    }
}

// const ServiceConsume = props => {
//
//     const list = props.coinConsumeList
//     const fetchList = props.doFetchCoinConsumeLog
//     const unmountMethod = () => {
//         props.doEmptyConsumeList()
//     }
//     const params = {p: 0, uid: LocalStorageService.get('userid')}
//     const render = (list) => {
//
//         const tH = [
//             {
//                 title: '时间', dataIndex: 'CreateT',
//             },
//             {
//                 title: '类型', dataIndex: 'Mark',
//             },
//             {
//                 title: '额度', dataIndex: 'Cost',
//             },
//         ]
//
//         const trTemplate = (list.map(item => {
//             return (
//                 <tr key={item.Dealno}>
//                     {/*<td>{tH[0]}</td>*/}
//                     {/*<td>{item.star}</td>*/}
//                     {/*<td>{item.category}</td>*/}
//                     {tH.map((head,i ) => {
//                         const mark = head.dataIndex
//                         let value = item[mark]
//
//                         if (mark === 'CreateT') {
//                             value = value.slice(0, 10)
//                         }
//
//                         return <td key={i}>{value}</td>
//                     })}
//                 </tr>
//             )
//         }))
//
//         return (
//             <table className='basic-table'>
//                 <BasicThead tHead={tH}/>
//                 <tbody>
//                     {trTemplate}
//                 </tbody>
//             </table>
//         )
//     }
//
//     return <FetchListComponent
//         fetchList={fetchList}
//         params={params}
//         list={list}
//         render={render}
//         unmountMethod={unmountMethod}
//     />
//
// }



const mapState = (state) => ({
    // coinConsumeList: state.user.
    coinConsumeList: state.user.coinConsumeList,
})

const mapDispatch = ({user: {doFetchConsumeData, doFetchPayData, doFetchCoinConsumeLog, doEmptyConsumeList,},}) => ({
    doFetchCoinConsumeLog: (payload) => doFetchCoinConsumeLog(payload),
    doEmptyConsumeList: () => doEmptyConsumeList(),
})



export default connect(mapState, mapDispatch)(ServiceConsume)
